<div class="container">
  <div class="row clearfix">
    <mat-card-actions> 
      <button mat-button (click)='DISCOLLECTION()' *ngIf="have_value(user.col_lis,pokemon.Id); else eCOLLECTION" >DISCOLLECTION</button>
      <ng-template #eCOLLECTION>
        <button mat-button (click)='COLLECTION()'>COLLECTION</button>
      </ng-template>
    </mat-card-actions>

    <div>
      <div class="list-group">
        <a routerLink="/pokemon" [queryParams]="{id: pokemon.Id}"
          class="list-group-item active">{{pokemon.Name}}————{{pokemon.Id}}</a>
        <div class="row clearfix">
          <div class="col-md-4 column">
            Type1:{{pokemon.Type1}}
          </div>
          <div class="col-md-4 column">
            Type2:{{pokemon.Type2}}
          </div>
          <div class="col-md-4 column">
            Abilities: {{pokemon.Abilities}}
          </div>
        </div>
        <div class="row clearfix">
          <div class="col-md-4 column">
            Category: {{pokemon.Category}}
          </div>
          <div class="col-md-4 column">
            Height(ft): {{pokemon.Height_ft}}
          </div>
          <div class="col-md-4 column">
            Height(m): {{pokemon.Height_m}}
          </div>
        </div>
        <div class="row clearfix">
          <div class="col-md-4 column">
            Weight(lbs): {{pokemon.Weight_lbs}}
          </div>
          <div class="col-md-4 column">
            Weight(kg): {{pokemon.Weight_kg}}
          </div>
          <div class="col-md-4 column">
            Capture Rate: {{pokemon.CaptureRate}}
          </div>
        </div>

        <div class="row clearfix">
          <div class="col-md-4 column">
            Egg Steps: {{pokemon.EggSteps}}
          </div>
          <div class="col-md-4 column">
            Exp Group: {{pokemon.ExpGroup}}
          </div>
          <div class="col-md-4 column">
            Total: {{pokemon.Total}}
          </div>
        </div>

        <div class="row clearfix">
          <div class="col-md-4 column">
            HP: {{pokemon.HP}}
          </div>
          <div class="col-md-4 column">
            Attack: {{pokemon.Attack}}
          </div>
          <div class="col-md-4 column">
            Defense: {{pokemon.Defense}}
          </div>
        </div>
        <div class="row clearfix">
          <div class="col-md-4 column">
            SpAttack: {{pokemon.SpAttack}}
          </div>
          <div class="col-md-4 column">
            SpDefense: {{pokemon.SpDefense}}
          </div>
          <div class="col-md-4 column">
            Speed: {{pokemon.Speed}}
          </div>
        </div>
        <hr>

        <div class="panel panel-default">
          <div class="panel-heading">
            <h4 class="panel-title">
              <a data-toggle="collapse" data-parent="#accordion" href="#{{pokemon.Id}}">
                Moves
              </a>
            </h4>
          </div>
          <div id="{{pokemon.Id}}" class="panel-collapse collapse">
            <div class="panel-body">
              <div *ngFor="let item of pokemon.Moves | keyvalue" class="row clearfix">
                <div class="">
                  <h4 class="panel-title">
                    {{item.key}}
                  </h4>
                  <div class="">
                    <div class="col-md-1 column">
                      Accuracy:{{item.value.Accuracy}}
                    </div>
                    <div class="col-md-6 column">
                      Description:{{item.value.Description}}
                    </div>
                    <div class="col-md-1 column">
                      Effect:{{item.value.Effect}}
                    </div>
                    <div class="col-md-1 column">
                      Level:{{item.value.Level}}
                    </div>
                    <div class="col-md-1 column">
                      PP:{{item.value.PP}}
                    </div>
                    <div class="col-md-1 column">
                      Power:{{item.value.Power}}
                    </div>
                    <div class="col-md-1 column">
                      Type:{{item.value.Type}}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="row">
  <div class="col-xs-3"></div>
  <div class="col-xs-6">
    <!-- 评论模块 -->
    <div class="input-group">
      <input type="text" class="form-control" [(ngModel)]='content' name="content" id="content" value="comt.content" />
      <span class="input-group-btn">
        <button class="btn btn-primary" (click)='submitComment()'>COMMENT</button>{{content}}
      </span>
    </div>
    <!-- 评论标题 -->
    <h2>COMMENTS</h2>
    <!-- 有显示 -->
    <!-- 评论内容 -->
    <ul class="list-group">
      <li class="list-group-item" *ngFor='let comment of commentArr '>
        <span>{{comment.user.username}}:{{comment.content}}</span>
        
        <a href="javascript:;" class="btn btn-link" (click)='deleteComment(comment)' *ngIf="user.username==comment.user.username ; else elseD">DELETE</a>
        <ng-template #elseD>
          <a href="javascript:;" class="btn btn-link" (click)='deleteComment(comment)' *ngIf="user.type==1">DELETE</a>
        </ng-template>
        <a href="javascript:;" class="btn btn-link" (click)='dislikeComment(comment)'
          *ngIf="have_value(comment.like_user,user.username); else elseElement">DISLIKE</a>

        <ng-template #elseElement><a href="javascript:;" class="btn btn-link" (click)='likeComment(comment)'>LIKE</a>
        </ng-template>
      </li>
    </ul>
  </div>
  <div class="col-xs-3"></div>
</div>